<template>
  <view class="test">
    <text @click="showDrawer" type="primary">更多</text>
    <uni-drawer ref="showRight" mode="right" :mask-click="true" :width="320" @close="closeDrawer">
      <view class="drawer-content">
        <view class="header">
          <text class="title">嘉宾筛选</text>
        </view>
        <view class="search-bar">
          <input
            type="text"
            placeholder="按用户ID/昵称"
            v-model="searchQuery"
            class="search-input"
          />
          <button @click="search" class="search-button">
            <uni-icons type="search" size="30"></uni-icons>
          </button>
        </view>

        <view class="filter-item" style="margin-top: 10px">
          <text class="font-item-text">年龄范围</text>
          <picker
            mode="multiSelector"
            :range="[
              [...Array(61).keys()].map((n) => n + 20),
              [...Array(61).keys()].map((n) => n + 20),
            ]"
            :value="[0, 60]"
            @change="bindAgeRangeChange"
            @confirm="confirmAgeRange"
          >
            <view class="uni-input">
              <template v-if="ageRangeSelected">
                <text class="range-text">{{ ageRange[0] }}岁 ~ {{ ageRange[1] }}岁</text>
              </template>
              <template v-else>请选择年龄范围</template>
              <uni-icons type="arrowright" size="20" class="icon"></uni-icons>
            </view>
          </picker>
        </view>

        <view class="filter-item">
          <text class="font-item-text">身高范围</text>
          <picker
            mode="multiSelector"
            :range="[
              [...Array(71).keys()].map((n) => n + 140),
              [...Array(71).keys()].map((n) => n + 140),
            ]"
            :value="[0, 70]"
            @change="bindHeightRangeChange"
            @confirm="confirmHeightRange"
          >
            <view class="uni-input">
              <template v-if="heightRangeSelected">
                <text class="range-text">{{ heightRange[0] }}cm ~ {{ heightRange[1] }}cm</text>
              </template>
              <template v-else>请选择身高范围</template>
              <uni-icons type="arrowright" size="20" class="icon"></uni-icons>
            </view>
          </picker>
        </view>

        <view class="filter-item">
          <text class="font-item-text">体重范围</text>
          <picker
            mode="multiSelector"
            :range="[
              [...Array(81).keys()].map((n) => n + 40),
              [...Array(81).keys()].map((n) => n + 40),
            ]"
            :value="[0, 80]"
            @change="bindWeightRangeChange"
            @confirm="confirmWeightRange"
          >
            <view class="uni-input">
              <template v-if="weightRangeSelected">
                <text class="range-text">{{ weightRange[0] }}kg ~ {{ weightRange[1] }}kg</text>
              </template>
              <template v-else>请选择体重范围</template>
              <uni-icons type="arrowright" size="20" class="icon"></uni-icons>
            </view>
          </picker>
        </view>

        <!-- 户籍地区选择器组件 -->
        <HukouAreaPicker :hukouArea="hukouArea" @update:hukouArea="updateHukouArea" />

        <view class="filter-item">
          <text class="font-item-text">户籍地区</text>
          <picker
            mode="region"
            :custom-item="['省']"
            @change="bindHukouAreaChange"
            @confirm="confirmHukouArea"
          >
            <view class="uni-input">
              <template v-if="hukouAreaSelected">
                <text class="range-text">{{ hukouArea.join(' ') }}</text>
              </template>
              <template v-else>请选择户籍地区</template>
              <uni-icons type="arrowright" size="20" class="icon"></uni-icons>
            </view>
          </picker>
        </view>

        <!-- 民族选择器组件 -->
        <NationalityPicker
          :nationalities="nationalities"
          @update:nationalities="updateNationalities"
        />

        <!-- 子女情况选择器组件 -->
        <ChildStatusPicker :childStatus="childStatus" @update:childStatus="updateChildStatus" />

        <view v-show="showPopupContent" class="popup-content">
          <radio-group @change="changeMaritalStatus">
            <label
              v-for="status in maritalStatusOptions"
              :key="status"
              :class="['radio-label', { selected: selectedMaritalStatus === status }]"
            >
              <radio :value="status" class="hidden-radio" />{{ status }}
              <uni-icons
                v-if="selectedMaritalStatus === status"
                type="checkmark"
                size="20"
                class="check-icon"
              ></uni-icons>
            </label>
          </radio-group>
        </view>
      </view>
    </uni-drawer>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AgeRangePicker from './components/AgeRangePicker.vue'
import HeightRangePicker from './components/HeightRangePicker.vue'
import WeightRangePicker from './components/WeightRangePicker.vue'
import WorkAreaPicker from './components/WorkAreaPicker.vue'
import HukouAreaPicker from './components/HukouAreaPicker.vue'
import MaritalStatusPicker from './components/MaritalStatusPicker.vue'
import NationalityPicker from './components/NationalityPicker.vue'
import ChildStatusPicker from './components/Children.vue'
import EducationPicker from './components/Degree.vue'
import RevenuePicker from './components/Revenue.vue'
import ProfessionPicker from './components/Occupation.vue'

// 引用uni-drawer组件的实例
const showRight = ref(null)

// 定义响应式变量用于存储筛选条件
const ageRange = ref<number[]>([])
const heightRange = ref<number[]>([])
const weightRange = ref<number[]>([])
const workArea = ref<string[]>([])
const hukouArea = ref<string[]>([])
const maritalStatuses = ref<string[]>([])
const nationalities = ref<string[]>([])
const childStatus = ref<string[]>([])
const education = ref<string[]>([])
const revenue = ref<string[]>([])
const professions = ref<string[]>([])

// 显示抽屉的方法
const showDrawer = () => {
  showRight.value.open()
}

// 关闭抽屉的方法
const closeDrawer = () => {
  showRight.value.close()
}

// 更新各个筛选条件的方法
const updateAgeRange = (range: number[]) => {
  ageRange.value = range
  if (ageRange.value.length) {
    console.log(`Selected age range: ${ageRange.value[0]} - ${ageRange.value[1]}`)
  }
}

const updateHeightRange = (range: number[]) => {
  heightRange.value = range
  if (heightRange.value.length) {
    console.log(`Selected height range: ${heightRange.value[0]}cm - ${heightRange.value[1]}cm`)
  }
}

const updateWeightRange = (range: number[]) => {
  weightRange.value = range
  if (weightRange.value.length) {
    console.log(`Selected weight range: ${weightRange.value[0]}kg - ${weightRange.value[1]}kg`)
  }
}

const updateWorkArea = (area: string[]) => {
  workArea.value = area
  if (workArea.value.length) {
    console.log(`Selected work area: ${workArea.value.join(' ')}`)
  }
}

const updateHukouArea = (area: string[]) => {
  hukouArea.value = area
  if (hukouArea.value.length) {
    console.log(`Selected hukou area: ${hukouArea.value.join(' ')}`)
  }
}

const updateMaritalStatuses = (statuses: string[]) => {
  maritalStatuses.value = statuses
  if (maritalStatuses.value.length) {
    console.log(`Selected marital statuses: ${maritalStatuses.value.join(', ')}`)
  }
}

const updateNationalities = (nats: string[]) => {
  nationalities.value = nats
  if (nationalities.value.length) {
    console.log(`Selected nationalities: ${nationalities.value.join(', ')}`)
  }
}

const updateChildStatus = (status: string[]) => {
  childStatus.value = status
  if (childStatus.value.length) {
    console.log(`Selected child status: ${childStatus.value.join(', ')}`)
  }
}

const updateEducation = (educations: string[]) => {
  education.value = educations
  if (education.value.length) {
    console.log(`Selected education: ${education.value.join(', ')}`)
  }
}

const updateRevenue = (revenues: string[]) => {
  revenue.value = revenues
  if (revenue.value.length) {
    console.log(`Selected revenue: ${revenue.value.join(', ')}`)
  }
}

const updateProfessions = (professions: string[]) => {
  professions.value = professions
  if (professions.value.length) {
    console.log(`Selected professions: ${professions.value.join(', ')}`)
  }
}

// 重置筛选条件的方法
const resetFilters = () => {
  ageRange.value = []
  heightRange.value = []
  weightRange.value = []
  workArea.value = []
  hukouArea.value = []
  maritalStatuses.value = []
  nationalities.value = []
  childStatus.value = []
  education.value = []
  revenue.value = []
  professions.value = []
}

// 确认筛选条件的方法
const confirmFilters = () => {
  const logMessage: Record<string, string> = {}
  if (ageRange.value.length) {
    logMessage.age_range = `${ageRange.value[0]}-${ageRange.value[1]}`
  }
  if (heightRange.value.length) {
    logMessage.height_range = `${heightRange.value[0]}-${heightRange.value[1]}`
  }
  if (weightRange.value.length) {
    logMessage.weight_range = `${weightRange.value[0]}-${weightRange.value[1]}`
  }
  if (workArea.value.length) {
    logMessage.work_area = workArea.value.join(' ')
  }
  if (hukouArea.value.length) {
    logMessage.hukou_area = hukouArea.value.join(' ')
  }
  if (maritalStatuses.value.length) {
    logMessage.marital_statuses = maritalStatuses.value.join(', ')
  }
  if (nationalities.value.length) {
    logMessage.nationalities = nationalities.value.join(', ')
  }
  if (childStatus.value.length) {
    logMessage.child_status = childStatus.value.join(', ')
  }
  if (education.value.length) {
    logMessage.education = education.value.join(', ')
  }
  if (revenue.value.length) {
    logMessage.revenue = revenue.value.join(', ')
  }
  if (professions.value.length) {
    logMessage.professions = professions.value.join(', ')
  }
  console.log('Filters confirmed:', logMessage)
  closeDrawer()
}
</script>

<style scoped>
.drawer-content {
  padding: 20px;
  background-color: #fff;
  height: 100%;
  overflow-y: auto;
}

.header {
  padding-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.search-bar {
  display: flex;
  align-items: center;
  position: relative;
}

.search-bar input {
  flex: 1;
  padding: 5px;
  border: none;
  border-radius: 4px;
  padding-right: 40px;
}

.search-bar input::placeholder {
  color: #ccc;
  opacity: 1;
}

.search-input {
  height: 40px;
  margin: 2px;
}

.search-button {
  position: absolute;
  right: 5px;
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.search-button uni-icons {
  color: #007bff;
}

.filter-item {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
  margin-bottom: 20px;
  /* 添加间隔 */
}

.font-item-text {
  color: #a9a5a3;
}

.uni-input {
  display: flex;
  align-items: center;
}

.range-text {
  color: #1e90ff;
}

.icon {
  color: #ccc;
  margin-left: 10px;
}

.vip-section {
  margin-top: 20px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
}

.vip-button {
  height: 20px;
  display: flex;
  align-items: center;
  padding: 5px;
  background-color: #ff9800;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 12px;
}

.vip-text {
  color: #1e90ff;
  font-size: 12px;
  margin-right: 10px;
}

.radio-label {
  display: flex;
  align-items: center;
  margin: 5px 0;
  padding: 5px 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
}

.radio-label.selected {
  background-color: #e0f7fa;
  color: #1e90ff;
  border: 1px solid red;
  width: 60px;
}

.check-icon {
  margin-left: auto;
  color: #1e90ff;
}

.hidden-radio {
  display: none;
}

.popup-content {
  padding: 20px;
  background-color: #fff;
  position: absolute;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}
.radio-group {
  display: flex;
  justify-content: space-evenly;
}

.radio-label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 40px;
  border: 1px solid #ff0000;
  border-radius: 4px;
  background-color: #f5f5f5;
  color: #666;
  font-size: 14px;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
  margin-left: 5rpx;
}

.radio-label.selected {
  background-color: #e0f7fa;
  color: #00acc1;
  border-color: #00acc1;
  border: 1px solid red;

  /* background-color: #e0f7fa;
  color: #1e90ff;
  border: 1px solid red;
  width: 60px; */
}

.radio-label.selected::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 13px 11px 10px;
  border-color: transparent rgb(1, 170, 190) rgb(1, 170, 190) transparent;
  border-radius: 0px;
  /* border: 1px solid red; */
}

.check-icon::after {
  content: '✔';
  position: absolute;
  right: 1px;
  top: 30px;
  z-index: 4;
  font-size: 14px;
  color: #ebebeb;
}

.drawer-content {
  padding: 16px;
  height: calc(100vh - 32px); /* 减去上下 padding */
  overflow-y: auto; /* 启用垂直滚动 */
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.reset-button {
  background-color: #ff4d4f;
  color: #fff;
}

.confirm-button {
  background-color: #108ee9;
  color: #fff;
}
</style>
